<template>
    <div class="sidebar">
      <div class="sidebar-header">
        <h3>智能分析模型</h3>
        <button class="btn-icon" @click="$emit('import')" title="导入算法">➕</button>
      </div>
      
      <div class="sidebar-content">
        <!-- Dashboard -->
        <div 
          class="sidebar-item" 
          :class="{ active: activeView === 'overview' }"
          @click="$emit('update:activeView', 'overview')"
        >
          <span class="icon">📊</span>
          <span class="label">总览仪表盘</span>
        </div>

        <!-- System Plugins -->
        <div class="group-title">系统算法</div>
        <div 
          v-for="plugin in systemPlugins" 
          :key="plugin.id"
          class="sidebar-item"
          :class="{ active: activeView === plugin.id }"
          @click="$emit('select-plugin', plugin)"
        >
          <span class="icon">🧩</span>
          <span class="label">{{ plugin.name }}</span>
        </div>

        <!-- User Plugins -->
        <div class="group-title">
            用户算法
            <span class="count" v-if="userPlugins.length">{{ userPlugins.length }}</span>
        </div>
        <div 
          v-for="plugin in userPlugins" 
          :key="plugin.id"
          class="sidebar-item"
          :class="{ active: activeView === plugin.id }"
          @click="$emit('select-plugin', plugin)"
        >
          <span class="icon">📂</span>
          <span class="label">{{ plugin.name }}</span>
        </div>
         <div v-if="userPlugins.length === 0" class="empty-group">
            暂无导入算法
         </div>
      </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    activeView: { type: String, required: true },
    allPlugins: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:activeView', 'select-plugin', 'import'])

const systemPlugins = computed(() => props.allPlugins.filter(p => p.source === 'system'))
const userPlugins = computed(() => props.allPlugins.filter(p => p.source === 'user'))
</script>

<style scoped>
/* Sidebar */
.sidebar {
    width: 250px;
    background: white;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 { font-size: 16px; margin: 0; }

.btn-icon {
    border: none;
    background: #f0f9ff;
    color: #409eff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.group-title {
    padding: 10px 15px 5px;
    font-size: 12px;
    color: #909399;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.count { background: #f0f2f5; padding: 2px 6px; border-radius: 10px; }

.sidebar-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #606266;
    transition: background 0.2s;
}

.sidebar-item:hover { background: #f5f7fa; }
.sidebar-item.active { background: #ecf5ff; color: #409eff; border-right: 2px solid #409eff; }

.empty-group { padding: 10px 15px; color: #c0c4cc; font-size: 13px; }
</style>
